(function () {
  $(function () {
    var sm = function () {
      $(".intro-title-container").addClass("intro-title-container-mobile");
      $(".intro-container").addClass("mobile");
      // var str=$(window).width()+'px';
      // $('.intro-title-container-mobile').css('width',str);
      var fontsize = 64 * ($(window).width() / 1025) + "px";
      var lineheight = 89 * ($(window).width() / 1025) + "px";
      var paddingtop = 96 * ($(window).width() / 1025) + "px";
      var paddingbottom = 57.6 * ($(window).width() / 1025) + "px";
      var paddingbottom2 = 38.4 * ($(window).width() / 1025) + "px";
      var width = $(window).width();
      var width2 = 921.594 * ($(window).width() / 1025) + "px";
      var height = 518.391 * ($(window).width() / 1025) + "px";
      var height2 = 384 * ($(window).width() / 1025) + "px";
      var width3 = 458.094 * ($(window).width() / 1025) + "px";
      var height3 = 190.875 * ($(window).width() / 1025) + "px";
      var marginright = 14.4 * ($(window).width() / 1025) + "px";
      var marginleft = 33.6 * ($(window).width() / 1025) + "px";
      var fontsize2 = 57.6 * ($(window).width() / 1025) + "px";
      var width4 = 28.797 * ($(window).width() / 1025) + "px";
      var height4 = 67.188 * ($(window).width() / 1025) + "px";
      var lineheight2 = 67.19 * ($(window).width() / 1025) + "px";
      var height5 = 54.391 * ($(window).width() / 1025) + "px";
      var lineheight3 = 54.39 * ($(window).width() / 1025) + "px";
      var width5 = 352 * ($(window).width() / 1025) + "px";
      var fontsize3 = 38.4 * ($(window).width() / 1025) + "px";
      $(".common-title").css({
        fontSize: fontsize,
        lineHeight: lineheight,
      });
      $(".intro-title-container-mobile").css({
        paddingTop: paddingtop,
        paddingBottom: paddingbottom,
      });
      $(".mobile").css("paddingBottom", paddingbottom2);
      $(".intro-box").css({
        width: width,
        height: "auto",
        flexFlow: "column",
        justifyContent: "center",
        alignItems: "center",
      });
      $(".intro-media").css({
        width: width2,
        height: height,
      });
      $(".intro-media-img").css({
        width: width2,
        height: height,
      });
      $(".intro-content-box").css({
        width: width2,
        height: height2,
        alignItems: "center",
        flexWrap: "wrap",
      });
      $(".intro-nav").css({
        width: width3,
        height: height3,
      });
      $(".intro-navIndex").css({
        marginRight: marginright,
        marginLeft: marginleft,
        fontSize: fontsize2,
        letterSpacing: "0",
        width: width4,
        height: height4,
        lineHeight: lineheight2,
      });
      $(".intro-navIntro").css({
        height: height5,
        lineHeight: lineheight3,
      });
      $(".intro-navTitle").css({
        height: height5,
        lineHeight: lineheight3,
        width: width5,
        fontSize: fontsize3,
      });
      $(".intro-navDetail").css("display", "none");
    };
    var mi = function () {
      $(".intro-title-container").removeClass("intro-title-container-mobile");
      $(".common-title").css({
        fontSize: "42px",
        lineHeight: "59px",
      });
      $(".mobile").css("paddingBottom", "");
      $(".intro-box").css({
        width: "1080px",
        height: "356px",
        flexFlow: "",
        justifyContent: "",
        alignItems: "",
      });
      $(".intro-media").css({
        width: "633px",
        height: "356px",
      });
      $(".intro-media-img").css({
        width: "633px",
        height: "356px",
      });
      $(".intro-content-box").css({
        width: "447px",
        height: "356px",
        alignItems: "",
        flexWrap: "",
      });
      $(".intro-nav").css({
        width: "447px",
        height: "90px",
      });
      $(".intro-navIndex").css({
        marginRight: "20px",
        marginLeft: "42px",
        fontSize: "72px",
        letterSpacing: "",
        width: "35px",
        height: "84px",
        lineHeight: "84px",
      });
      $(".intro-navIntro").css({
        height: "",
        lineHeight: "",
      });
      $(".intro-navTitle").css({
        height: "42px",
        lineHeight: "",
        width: "300px",
        fontSize: "30px",
      });
      $(".intro-navDetail").css("display", "block");
    };
    var lg = function () {
      $(".common-title").css({
        fontSize: "56px",
        lineHeight: "78px",
      });
      $(".intro-box").css({
        width: "1440px",
        height: "467px",
      });
      $(".intro-media").css({
        width: "830px",
        height: "467px",
      });
      $(".intro-media-img").css({
        width: "830px",
        height: "467px",
      });
      $(".intro-content-box").css({
        width: "610px",
        height: "467px",
      });
      $(".intro-nav").css({
        width: "610px",
        height: "117px",
      });
      $(".intro-navIndex").css("marginLeft", "80px");
    };
    if ($(window).width() < 1025) {
      sm();
    }
    if ($(window).width() >= 1025 && $(window).width() < 1920) {
      mi();
    }
    if ($(window).width() > 1920) {
      lg();
    }
    $(window).on("resize", function () {
      if ($(window).width() < 1025) {
        sm();
      }
      //
      if ($(window).width() >= 1025 && $(window).width() < 1920) {
        mi();
      }
      if ($(window).width() > 1920) {
        lg();
      }
    });
    $(".intro-content-box").on("click", ".intro-nav", function () {
      $(this).addClass("active").siblings().removeClass("active");
      $(".intro-media-img")
        .eq($(this).index())
        .css("opacity", "1")
        .siblings()
        .css("opacity", "0");
    });
  });
})();
